<template>
    <div class="fillcontain">
        <nav-header></nav-header>
        <div class="edit_container">
            <quill-editor v-model="content"
                ref="myQuillEditor"
                class="editer"
                :options="editorOption"
                @ready="onEditorReady($event)">
            </quill-editor>
            <el-button type="primary" @click="submit" style="margin-top: 90px;">提交</el-button>
        </div>
    </div>
</template>

<script>
    import NavHeader from '@/components/header.vue';
    import { quillEditor } from 'vue-quill-editor'
    export default {
        name: 'Page',
        data(){
            return {
                content: '<h3>文本编辑</h3>',
                editorOption: {
                    
                }
            }
        },
        components: {
            NavHeader,
            quillEditor,
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        methods: {
            onEditorReady(editor) {
                console.log('editor ready!', editor)
            },
            submit(){
                console.log(this.content);
                this.$message.success('提交成功！');
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">

    @import '../styles/common';
    @import '../styles/mixin';
    .shop_box{
        width: 100%;
    }
    .btn_sp{
        width: 100%; height: 50px;
    }
    .edit_container{
        padding: 40px;
        margin-bottom: 40px;
    }
    .editer{
        height: 350px;
    }
</style>
